<script>
import pdf from 'vue-pdf'
export default {
    components:{
        Pdf:pdf
    },
    data(){
        return {
            previewer:{
                visible:false,
                pdf:null,
                currentPage:1,
                totalPage:0
            }
        }
    },
    props:{
        data:{
            type:Array,
            required:true,
            default(){
                return []
            }
        }
    },
    computed:{
        hasNextPage(){
            return this.previewer.currentPage < this.previewer.totalPage
        },
        isFirstPage(){
            return this.previewer.currentPage <= 1
        }
    },
    methods:{
        previewAgreement(url){
            console.log(url)
            this.previewPDF(url)
        },
        downloadAgreement(url){
            window.open(url)
        },
        previewPDF(url){
            const task = pdf.createLoadingTask(
                url,
                {
                    withCredentials:false
                }
            )

            task.promise
                .then((result) => {
                    console.log(result)
                    this.previewer.visible = true
                    this.previewer.totalPage = result.numPages
                })
                .catch((err) => {
                    console.error('pdf 加载失败', err)
                })

            this.previewer.pdf = task
                
        },
        nextPage(){
            if(!this.hasNextPage)
                return
            
            this.previewer.currentPage++
        },
        prevPage(){
            if(this.isFirstPage)
                return
            
            this.previewer.currentPage--
        },
        closePreviewer(){
            this.previewer.visible = false
        }
    }
}
</script>

<template>
    <div class="signed-agreements-container">
        <template
            v-if="data.length > 0"
        >
            <div class="agreements">
                <div 
                    class="wrap" 
                    v-for="item in data"
                    :key="item.id"
                >
                    <div class="agreement-item" >
                        <div class="cover">
                            <svg-icon class="cover" icon-class="agreement" style="width: 130px;height: 100%;" />
                        </div>

                        <div class="agreement-name">{{ item.name }}</div>

                        <div class="actions">
                            <div class="action-item" @click="previewAgreement(item.url)">
                                <i class="el-icon-view" />
                                <span>预览</span>
                            </div>

                            <div class="action-item" @click="downloadAgreement(item.url)">
                                <i class="el-icon-download" />
                                <span>下载</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <el-empty 
            v-else 
            :image-size="60"
            description="暂无协议..."
        />

        <el-dialog
            title="协议预览"
            :visible.sync="previewer.visible"
            width="40%"
        >
            <div>
                <Pdf 
                    v-if="previewer.pdf"
                    :src="previewer.pdf"
                    :page="previewer.currentPage"
                    :num-pages="previewer.totalPage"
                />
                <div style="text-align: center;">
                    <el-button type="primary" plain size="mini" :disabled="isFirstPage" @click="prevPage">上一页</el-button>
                    <el-button type="primary" plain size="mini" :disabled="!hasNextPage" @click="nextPage">下一页</el-button>
                </div>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="closePreviewer">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss">
.signed-agreements-container {
    background-color: #f5f5f5;
    padding: 6px;
    border-radius: 8px;

    >.agreements {
        display: flex;
        flex-wrap: wrap;
        
        >.wrap {
            padding: 5px;
            >.agreement-item {
                height: 200px;
                width: 130px;
                cursor: pointer;
                border-radius: 8px;
                background-color: #fff;
                transition: all .3s;
                flex-shrink: 1;

                &:hover {
                    transform: scale(1.02);
                    box-shadow: 0 0 12px 1px rgba(95, 95, 95, 0.1);
                }

                >.cover {
                    height: 50%;
                }

                >.agreement-name {
                    font-size: 14px;
                    font-weight: bold;
                    text-align: center;
                    margin-top: 20%;
                }

                >.actions {
                    margin-top: 12%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: center;
                    font-weight: bold;
                    color: rgb(83, 169, 250);

                    .action-item {
                        margin: 0 4px;
                        font-size: 12px;

                        &:hover {
                            color: rgb(24, 143, 255);
                        }

                        & + .action-item::before {
                            content: '|';
                            margin-right: 4px;
                        }

                        >span {
                            margin-left: 2px;
                        }
                    }
                }
            }
        }
    }
}

</style>